<template>
	<div :class="className" :id="id" :style="{height:height, width:width}"></div>
</template>

<script>
	import resize from './mixins/resize'
	import { deepClone } from '@/utils'

  export default {
    mixins: [resize],
    name: "Chart",
    data() {
      return {
				chart: null,
				defaultOption: {
					backgroundColor: '#ccc',
					title: { text: "Vue-Echarts" },
					legend: {
					},
					xAxis: {
					},
					yAxis: {},
					series: [],
					animationEasing: 'elasticOut',
          animationEasingUpdate: 'elasticOut',
          animationDelay(idx) {
            return idx * 20
          },
          animationDelayUpdate(idx) {
            return idx * 20
          }
				}
      }
    },
    props: {
			className: {
				type: String,
				default: 'chart'
			},
      id: {
        type: String
      },
      width: {
        type: String,
        default: "100%"
      },
      height: {
        type: String,
        default: "300px"
      },
      option: {
				type: Object
			}
    },
    watch: {
      option: {
        handler(newVal, oldVal) {
          if (this.chart) {
            if (newVal) {
							let option = Object.assign(this.defaultOption, newVal)
              this.chart.setOption(option);
            }
          } else {
            this.initChart();
          }
        },
        deep: true
      }
    },
    mounted() {
      this.initChart();
    },
    methods: {
      initChart() {
        this.chart = this.$echarts.init(document.getElementById(this.id));
        this.chart.setOption(this.option);
      }
    }
  };
</script>